<template>
    <div id="tel">
        <van-nav-bar
            title="绑定手机号"
            left-arrow
            @click-left="$router.push('/')"
        />
        <div class="tip">
            <img src="../../assets/images/tip.png" alt="" />
            您还未进行绑定，请输入手机号进行绑定!
        </div>
        <van-form @submit="onSubmit" label-width="auto">
            <van-field
                v-model="phone"
                name="手机号"
                label="手机号"
                class="mandatory"
                placeholder="请输入手机号"
                :rules="[
                    {
                        required: true,
                        pattern: /^1[3-9][0-9]{9}$/,
                        message: '请填写正确的手机号',
                    },
                    { required: true, message: '手机号不能为空' }
                ]"
            />
            <div class="submit">
                <van-button round block type="info" native-type="submit"
                    >提交</van-button
                >
            </div>
        </van-form>
    </div>
</template>

<script>
import { Toast } from "vant";
import api from "../../http/api";
export default {
    name: "Home",
    data() {
        return {
            // 手机号
            phone: "",
        };
    },
    mounted() {

    },
    methods: {
        /**
         * 手机号绑定
         */
        onSubmit() {
            api.user
                .telephone({ openid: localStorage.userId, phone: this.phone })
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        Toast.success("绑定成功");
                        localStorage.phone = this.phone;
                        localStorage.frameToken = res.data.frameToken;
                        setTimeout(() => {
                            this.$router.push("/");
                        }, 800);
                    } else {
                        Toast.fail("绑定失败");
                    }
                });
        },
    },
};
</script>
<style lang="less" scoped>
#tel {
    width: 100vw;
    min-height: 100vh;
    background-color: #f5f5f5;
    .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
    .tip {
        font-family: "Source Han Sans SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        margin: 12px;
        display: flex;
        /* identical to box height, or 143% */

        color: #666666;
        img {
            margin-right: 10px;
        }
    }
    .submit {
        position: absolute;
        width: 100vw;
        height: 68px;
        left: 0px;
        bottom: 0;

        background: #ffffff;
        /deep/ .van-button--block {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 10px 143.5px;
            gap: 10px;

            position: absolute;
            width: 94%;
            height: 44px;
            background: #0e86d1;
            border-radius: 4px;
            margin: 12px;
        }
    }
    /deep/ .van-cell {
        align-items: center;
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        /* identical to box height, or 150% */

        color: #666666;
    }
    /deep/ .van-field__control::-webkit-input-placeholder {
        text-align: right;
    }
    /deep/ .van-ellipsis {
        overflow: visible;
    }
    /deep/ .van-nav-bar__content {
        height: 51px;
    }
    /deep/ .van-nav-bar__title {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 20px;
        /* identical to box height, or 111% */

        text-align: center;
        letter-spacing: -0.24px;

        color: #333333;
    }
    /deep/ .van-nav-bar .van-icon {
        /* 文字颜色3 */

        color: #999999;
    }
}
</style>
